<template>
	<view>
		<view class="top-title">
			<span class="title-word" @click="handleCity">
				{{ selectedCity.cityName ? selectedCity.cityName : '请选择' }}
				<u-icon name="arrow-down-fill" color="#999" size="14px" />
			</span>
			<view class="refresh-but" @click="showPermissionGuide">
				<u-icon name="map" color="#fff"></u-icon>
				获取定位
			</view>
		</view>
		<view class="address-list">
			<view class="list-one" v-for="(item, index) in 20" :key="index" @click="handleDetail">
				<image class="left-img" src="https://t13.baidu.com/it/u=1326581767,2565675948&fm=224&app=112&f=JPEG?w=500&h=500" mode="widthFix"></image>
				<view class="right-cont">
					<view class="word-box">
						<view class="address-name">测试</view>
						<view class="space-num">999.5km</view>
						<view class="address-word">地址的地址的地址的地址的地址的</view>
					</view>
					<view class="button-list">
						<view class="but-bottom">进店</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
	</view>
</template>

<script>
import QQMapWX from '@/libs/qqmap-wx-jssdk.js';
import * as CategoryApi from '@/api/category';
const App = getApp();
export default {
	data() {
		return {
			citySelector: null,
			selectedCity: {
				cityName: '',
				cityCode: ''
			}
		};
	},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {
		if (App.globalData.selectedCity) {
			this.selectedCity = { ...App.globalData.selectedCity };
		}
		this.citySelector = requirePlugin('citySelector');
		const data = this.citySelector.getCity(); // 选择城市后返回城市信息对象，若未选择返回nul
		if (data) {
			this.selectedCity.cityName = data.fullname;
			this.selectedCity.cityCode = data.id;
			// 修改属性（直接赋值）
			App.globalData.selectedCity = { ...this.selectedCity };
		}
		//查询店铺列表
		this.getShopList();
	},

	onUnload() {
		// 页面卸载时清空插件数据，防止再次进入页面，getCity返回的是上次的结果
		this.citySelector.clearCity();
	},
	methods: {
		// 选择城市
		handleCity() {
			uni.navigateTo({
				url: `plugin://citySelector/index?key=${App.globalData.location.key}&referer=${App.globalData.location.referer}&hotCitys=${App.globalData.location.hotCitys}`
			});
		},
		// 点击获取定位
		async showPermissionGuide() {
			// 检查权限状态
			const settingRes = await uni.getSetting();
			const hasPermission = settingRes.authSetting['scope.userLocation'];

			if (hasPermission === false) {
				// 明确拒绝状态
				uni.showModal({
					title: '位置权限已关闭',
					content: '需要开启定位权限才能提供服务',
					confirmText: '去设置',
					success: (modalRes) => {
						if (modalRes.confirm) {
							uni.openSetting({
								// 跳转系统权限设置页
								success: (settingRes) => {
									if (settingRes.authSetting['scope.userLocation']) {
										this.handleNewAddress(); // 重新获取定位
									}
								}
							});
						}
					}
				});
			} else {
				this.handleNewAddress(); // 重新获取定位
			}
		},
		// 获取定位
		handleNewAddress() {
			uni.getLocation({
				type: 'gcj02', // 必须使用GCJ-02坐标系
				altitude: true,
				success: (res) => {
					this.getCityCode(res.longitude, res.latitude);
					console.log('经度:', res.longitude);
					console.log('纬度:', res.latitude);
				},
				fail: (err) => {
					console.error('定位失败:', err);
				}
			});
		},
		//根据坐标获取城市编码信息
		getCityCode(longitude, latitude) {
			const qqmapsdk = new QQMapWX({
				key: App.globalData.location.key // 替换为你的 Key
			});

			qqmapsdk.reverseGeocoder({
				location: {
					latitude: latitude,
					longitude: longitude
				},
				success: (res) => {
					const result = res.result;
					console.log('行政区划信息:', result.ad_info); // 包含省市区编码
					this.selectedCity.cityName = result.ad_info.city;
					this.selectedCity.cityCode = result.ad_info.city_code.substring(3);
					// 修改属性（直接赋值）
					App.globalData.selectedCity = { ...this.selectedCity };
					//查询店铺列表
					this.getShopList();
				},
				fail: (err) => {
					console.error('定位失败', err);
				}
			});
		},
		//查询店铺数据
		getShopList() {
			//是否已选城市
			if (!this.selectedCity.cityCode) {
				return;
			}
			console.log(this.selectedCity);
			const app = this;
			CategoryApi.shopDetail({ store_id: app.selectedCity.cityCode })
				.then((result) => {
					// 设置页面数据
					const {
						data: { list }
					} = result;
					console.log(result);
				})
				.finally(() => callback && callback());
		},
		//进入店铺详情
		handleDetail() {
			uni.navigateTo({
				url: '/car/car-detail/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	padding: 20rpx;
	box-sizing: border-box;
}
.top-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 20rpx;
	box-sizing: border-box;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #f7f7f7;
	z-index: 1;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); /* 阴影参数 */
	.title-word {
		font-size: 30rpx;
		font-weight: bold;
		color: #000;
	}
	.refresh-but {
		width: 200rpx;
		height: 50rpx;
		background-color: #12a6dc;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
	}
}
.address-list {
	margin-top: 100rpx;
	.list-one {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.15);
		background-color: #fff;
		margin-bottom: 20rpx;
		.left-img {
			width: 120rpx;
			flex-shrink: 0;
		}
		.right-cont {
			width: calc(100% - 120rpx);
			padding-left: 20rpx;
			display: flex;
			justify-content: space-between;
			.word-box {
				width: calc(100% - 150rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.address-name {
					color: #000;
					font-size: 30rpx;
					font-weight: bold;
				}
				.bottom-info {
					display: flex;
					.space-num {
						background-color: #eee;
						color: #12a6dc;
						padding: 0 8rpx;
						height: 40rpx;
						border-radius: 5rpx;
						display: flex;
						align-items: center;
					}
					.address-word {
						width: 320rpx;
						margin-left: 10rpx;
						overflow: hidden; /* 隐藏溢出内容 */
						white-space: nowrap; /* 禁止文本换行 */
						text-overflow: ellipsis; /* 显示省略号 */
					}
				}
			}
			.button-list {
				display: flex;
				align-items: center;
				justify-content: center;
				.but-bottom {
					width: 100rpx;
					height: 70rpx;
					font-weight: bold;
					color: #fff;
					background-color: #12a6dc;
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
}
</style>
